import { EventEmitter } from "./EventEmitter"

export class Sizes extends EventEmitter {
  canvas:any;
  pixelRatio:any;
  width:any;
  height:any;


  constructor({ canvas }) {
    super()
    this.canvas = canvas
    this.pixelRatio = 0
    this.init()

    this.canvas.addEventListener("resize", () => {
      this.init()
      this.emit("resize")
    })
    window.addEventListener("resize", () => {
      this.init()
      this.emit("resize")
    })
    const resizeObserver = new ResizeObserver(entries => {
      for (const entry of entries) {
        const { width, height } = entry.contentRect;
        this.init()
        this.emit("resize")
      }
    })
    resizeObserver.observe(this.canvas.parentNode);
  }
  init() {

    this.width = this.canvas.parentNode.clientWidth;
    this.height = this.canvas.parentNode.clientHeight;
    // this.width = this.canvas.clientWidth;
    // this.height = this.canvas.clientHeight;
    this.pixelRatio = this.pixelRatio || Math.min(window.devicePixelRatio, 2)
  }
  destroy() {
    this.off("resize",{})
  }
}
